<template>
  <div>
    <a-card style="height: 95vh">
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_VI_query'" @click="queryTableList">{{$t('menuItem.QueryUser')}}
            </a-button>
            <a-button type="primary" v-has="'btn_VI_export'" @click="exportExcel">{{$t('btn.export')}}
            </a-button>
            <a-button type="primary" v-has="'btn_VI_clean'" @click="cleanData">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.LotId')">
                <a-select
                    v-model="queryForm.lotId"
                    show-search
                    :filter-option="filterOption"
                    allowClear
                    :placeholder="$t('menuItem.LotIdWarn')"
                    showArrow
                    @change="lotIdChange"
                    @search="lotIdSearch"
                >
                  <a-select-option v-for="item in lotList" :key="item.lotId">
                    {{ item.lotId }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.Technology')" >
                <a-input
                    v-model="queryLotInfoForm.technology"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.ProductId')" >
                <a-input
                    v-model="queryLotInfoForm.productName"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.Customer')" >
                <a-input
                    v-model="queryLotInfoForm.customerCode"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.Quantity')" >
                <a-input
                    v-model="queryLotInfoForm.quantity"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.Inspector')" >
                <a-input
                    v-model="queryLotInfoForm.evtUsr"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.date')" >
                <a-input
                    v-model="queryLotInfoForm.evtTimestamp"
                    allowClear
                    disabled
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="20">
          <a-row>
            <!-- table MA -->
            <a-col :span="24">
              <a-table
                  :columns="columns"
                  :dataSource="dataSource"
                  :loading="loadTable"
                  size="small"

                  bordered
                  :rowKey="(record,index)=>{return index}"
                  :scroll="{y:200 }"
                  :pagination="false"
              >
                <template  slot="siteJudgeS1" slot-scope="text, record">
                  <a v-if="record.siteJudgeS1 != 'OK'" @click="()=>clickCell(getRecord(record,'S1'))">{{record.siteJudgeS1}}</a>
                  <span v-if="record.siteJudgeS1 == 'OK'" >{{record.siteJudgeS1}}</span>
                </template>
                <template slot="siteJudgeS2" slot-scope="text, record">
                  <a v-if="record.siteJudgeS2 != 'OK'" @click="()=>clickCell(getRecord(record,'S2'))">{{record.siteJudgeS2}}</a>
                  <span v-if="record.siteJudgeS2 == 'OK'" >{{record.siteJudgeS2}}</span>
                </template>
                <template slot="siteJudgeS3" slot-scope="text, record">
                  <a v-if="record.siteJudgeS3 != 'OK'" @click="()=>clickCell(getRecord(record,'S3'))">{{record.siteJudgeS3}}</a>
                  <span v-if="record.siteJudgeS3 == 'OK'" >{{record.siteJudgeS3}}</span>
                </template>
                <template slot="siteJudgeS4" slot-scope="text, record">
                  <a v-if="record.siteJudgeS4 != 'OK'" @click="()=>clickCell(getRecord(record,'S4'))">{{record.siteJudgeS4}}</a>
                  <span v-if="record.siteJudgeS4 == 'OK'" >{{record.siteJudgeS4}}</span>
                </template>
                <template slot="siteJudgeS5" slot-scope="text, record">
                  <a v-if="record.siteJudgeS5 != 'OK'" @click="()=>clickCell(getRecord(record,'S5'))">{{record.siteJudgeS5}}</a>
                  <span v-if="record.siteJudgeS5 == 'OK'" >{{record.siteJudgeS5}}</span>
                </template>
                <template slot="siteJudgeS6" slot-scope="text, record">
                  <a v-if="record.siteJudgeS6 != 'OK'" @click="()=>clickCell(getRecord(record,'S6'))">{{record.siteJudgeS6}}</a>
                  <span v-if="record.siteJudgeS6 == 'OK'" >{{record.siteJudgeS6}}</span>
                </template>
                <template slot="siteJudgeS7" slot-scope="text, record">
                  <a v-if="record.siteJudgeS7 != 'OK'" @click="()=>clickCell(getRecord(record,'S7'))">{{record.siteJudgeS7}}</a>
                  <span v-if="record.siteJudgeS7 == 'OK'" >{{record.siteJudgeS7}}</span>
                </template>
                <template slot="siteJudgeS8" slot-scope="text, record">
                  <a v-if="record.siteJudgeS8 != 'OK'" @click="()=>clickCell(getRecord(record,'S8'))">{{record.siteJudgeS8}}</a>
                  <span v-if="record.siteJudgeS8 == 'OK'" >{{record.siteJudgeS8}}</span>
                </template>
                <template slot="siteJudgeS9" slot-scope="text, record">
                  <a v-if="record.siteJudgeS9 != 'OK'" @click="()=>clickCell(getRecord(record,'S9'))">{{record.siteJudgeS9}}</a>
                  <span v-if="record.siteJudgeS9 == 'OK'" >{{record.siteJudgeS9}}</span>
                </template>
                <template slot="title" >
                  <a-row style="margin: -8px -16px;display:flex;align-items:center;">
                    <div align="center" class="m-table-title-footer-layout-left-for-page">{{queryForm.lotId}}</div>
                    <div align="center" class="m-table-title-footer-layout-right-for-page">Wafer Visual Inspection Record Form MA</div>
                  </a-row>
                </template>
                <template slot="footer">
                  <a-row style="margin: -16px -16px">
                    <div align="center" class="m-table-title-footer-layout-left-for-page">Comment</div>
                    <div align="left" class="m-table-title-footer-layout-right-for-page">{{capForm.comment}}</div>
                  </a-row>
                </template>
              </a-table>
            </a-col>
          </a-row>
          <!-- table Engineer -->
          <br>
          <a-row>
            <a-col :span="24">
              <a-table
                  :columns="columns"
                  :dataSource="dataSource2"
                  :loading="loadTable"
                  size="small"
                  bordered
                  :rowKey="(record,index)=>{return index}"
                  :scroll="{y:200 }"
                  :pagination="false"
              >
                <template  slot="siteJudgeS1" slot-scope="text, record">
                  <a v-if="record.siteJudgeS1 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S1'))">{{record.siteJudgeS1}}</a>
                  <span v-if="record.siteJudgeS1 == 'OK'" >{{record.siteJudgeS1}}</span>
                </template>
                <template slot="siteJudgeS2" slot-scope="text, record">
                  <a v-if="record.siteJudgeS2 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S2'))">{{record.siteJudgeS2}}</a>
                  <span v-if="record.siteJudgeS2 == 'OK'" >{{record.siteJudgeS2}}</span>
                </template>
                <template slot="siteJudgeS3" slot-scope="text, record">
                  <a v-if="record.siteJudgeS3 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S3'))">{{record.siteJudgeS3}}</a>
                  <span v-if="record.siteJudgeS3 == 'OK'" >{{record.siteJudgeS3}}</span>
                </template>
                <template slot="siteJudgeS4" slot-scope="text, record">
                  <a v-if="record.siteJudgeS4 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S4'))">{{record.siteJudgeS4}}</a>
                  <span v-if="record.siteJudgeS4 == 'OK'" >{{record.siteJudgeS4}}</span>
                </template>
                <template slot="siteJudgeS5" slot-scope="text, record">
                  <a v-if="record.siteJudgeS5 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S5'))">{{record.siteJudgeS5}}</a>
                  <span v-if="record.siteJudgeS5 == 'OK'" >{{record.siteJudgeS5}}</span>
                </template>
                <template slot="siteJudgeS6" slot-scope="text, record">
                  <a v-if="record.siteJudgeS6 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S6'))">{{record.siteJudgeS6}}</a>
                  <span v-if="record.siteJudgeS6 == 'OK'" >{{record.siteJudgeS6}}</span>
                </template>
                <template slot="siteJudgeS7" slot-scope="text, record">
                  <a v-if="record.siteJudgeS7 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S7'))">{{record.siteJudgeS7}}</a>
                  <span v-if="record.siteJudgeS7 == 'OK'" >{{record.siteJudgeS7}}</span>
                </template>
                <template slot="siteJudgeS8" slot-scope="text, record">
                  <a v-if="record.siteJudgeS8 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S8'))">{{record.siteJudgeS8}}</a>
                  <span v-if="record.siteJudgeS8 == 'OK'" >{{record.siteJudgeS8}}</span>
                </template>
                <template slot="siteJudgeS9" slot-scope="text, record">
                  <a v-if="record.siteJudgeS9 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S9'))">{{record.siteJudgeS9}}</a>
                  <span v-if="record.siteJudgeS9 == 'OK'" >{{record.siteJudgeS9}}</span>
                </template>
                <template slot="title" >
                  <a-row style="margin: -8px -16px;display:flex;align-items:center;">
                    <div align="center" class="m-table-title-footer-layout-left-for-page">{{queryForm.lotId}}</div>
                    <div align="center"  class="m-table-title-footer-layout-right-for-page">Wafer Visual Inspection Record Form Engineer</div>
                  </a-row>
                </template>
                <template slot="footer">
                  <a-row style="margin: -16px -16px;">
                    <div align="center" class="m-table-title-footer-layout-left-for-page">Comment</div>
                    <div align="left"  class="m-table-title-footer-layout-right-for-page">{{capForm.comment}}</div>
                  </a-row>
                </template>
              </a-table>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4">
          <a-table
              size="small"
              :columns="columns2"
              :dataSource="dataSource3"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :scroll="{y:windowHeight - 300 }"
              :pagination="false"
          >
            <template slot="ymsResult" slot-scope="text, record">
              <a-tag v-if="record.ymsResult == '0'"  color="green" >{{"P"}}</a-tag>
              <a-tag v-if="record.ymsResult == '1'"   color="red" >{{"F"}}</a-tag>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
    <VisualInspectionReportModel></VisualInspectionReportModel>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import VisualInspectionReportModel from "@/views/SEM4000/VisualInspectionReportModel";
export default {
  name: "VisualInspectionReport",
  components: {VisualInspectionReportModel},
  data() {
    return{
      columns: [
        {
          title: this.$t('menuItem.waferNo'),
          dataIndex: "waferNo",
          key: "waferNo",
          align: 'center',
        },
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: 'waferId',
          key: 'waferId',
          align: 'center',
        },
        {
          title: 'S1',
          dataIndex: 'siteJudgeS1',
          key: 'siteJudgeS1',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS1'},
        },
        {
          title: 'S2',
          dataIndex: 'siteJudgeS2',
          key: 'siteJudgeS2',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS2'},
        },
        {
          title: 'S3',
          dataIndex: 'siteJudgeS3',
          key: 'siteJudgeS3',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS3'},
        },
        {
          title: 'S4',
          dataIndex: 'siteJudgeS4',
          key: 'siteJudgeS4',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS4'},
        },
        {
          title: 'S5',
          dataIndex: 'siteJudgeS5',
          key: 'siteJudgeS5',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS5'},
        },
        {
          title: 'S6',
          dataIndex: 'siteJudgeS6',
          key: 'siteJudgeS6',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS6'},
        },
        {
          title: 'S7',
          dataIndex: 'siteJudgeS7',
          key: 'siteJudgeS7',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS7'},
        },
        {
          title: 'S8',
          dataIndex: 'siteJudgeS8',
          key: 'siteJudgeS8',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS8'},
        },
        {
          title: 'S9',
          dataIndex: 'siteJudgeS9',
          key: 'siteJudgeS9',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS9'},
        },
      ],
      columns2: [
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: "waferId",
          key: "waferId",
          align: 'center'
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'ymsResult',
          key: 'ymsResult',
          align: 'center',
          scopedSlots: {customRender: 'ymsResult'},
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('VisualInspectionReport', ['lotList','queryForm','dataSource','loadTable','dataSource2','dataSource3',
    'capForm','queryLotInfoForm','VisualInspectionReportDetailVisible']),
  },
  methods: {
    ...mapMutations('VisualInspectionReport', ['queryLotList','querySelectList','queryLotComment','queryRetWaferInfo'
      ,'queryTableList','cleanData','clickCell','queryEngTableList','exportExcel','clickCellEng']),
    // 下拉框搜索
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    getRecord(rec,site) {
      let record=rec;
      record.site = site;
      return record;
    },
    lotIdSearch(data){
      this.queryLotList(data);
    },
    lotIdChange(data) {
      if(!this.queryForm.lotId){
        this.cleanData();
        return
      }
      this.querySelectList(data)
      this.queryLotComment(data)
      this.queryTableList(data)
      this.queryEngTableList(data)
      this.queryRetWaferInfo(this.queryForm.lotId)
    },

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    // 查询工号/用户名下拉框数据
    this.queryLotList()
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
<style>
  .m-table-title-footer-layout-left-for-page{
    height:37px;display:inline-block;width:calc(2/11 * (100% - 8px));border-right: 1px solid  #e9e9e9;padding-top: 8px;padding-bottom: 8px
  }
  .m-table-title-footer-layout-right-for-page{
    width:calc(9/11 * (100% - 8px));display:inline-block;padding-top: 8px;padding-bottom: 8px;padding-left: 16px;
  }
</style>
